<template>
  <el-drawer
      v-model="showPayRegister"
      title="取单"
      :direction="'ltr'"
      size="40%"
  >
    <el-row>
      <el-col :span="5" style="height: 85vh;border-right: 2px solid #d4d4d4">
        <el-scrollbar>
          <el-menu :default-active="payRegisterData[0]" @select="handleSelect">
            <el-menu-item v-for="payRegister in payRegisterData" :key="payRegister.createTime" :index="payRegister">
              {{formatDate(payRegister.createTime)}}
            </el-menu-item>
          </el-menu>
        </el-scrollbar>
      </el-col>
      <el-col :span="19">
        <el-table :data="payRegisterDetail.detailObject"
                  height="70vh"
                  style="width: 100%;"
        >
          <el-table-column prop="goodsName" label="商品名"  />
          <el-table-column prop="price" label="单价" />
          <el-table-column prop="num" label="数量" />
          <el-table-column prop="total" label="金额"/>
        </el-table>
        <div v-if="payRegisterData.length!==0" style="text-align: right;margin: 1% 5% 1% 1%"><el-text  size="large">总计{{payRegisterDetail.total}}元</el-text></div>
        <div v-if="payRegisterData.length!==0" style="display: flex;margin: 5% 5% 5% 5%">
          <div style="flex: 12;text-align: right">
            <el-button type="info" round size="large" style="width: 70px;" @click="delPayRegister">删除</el-button>
          </div>
          <div style="flex: 12;text-align: right">
            <el-button type="warning" round size="large" style="width: 200px" @click="outPayRegister">取出</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-drawer>
</template>

<script setup>

import {ref} from "vue";
import request from "@/utils/request";
import {store} from "@/store";
import {dateTimeUtils} from "@/utils/dateTimeUtils";

const emit = defineEmits(['confirmPayRegister'])
const showPayRegister=ref(false)
const payRegisterData=ref([])
const payRegisterDetail=ref({})
const show = (data) => {
  showPayRegister.value=true
  payRegisterData.value=data
  if (payRegisterData.value.length!==0)
    payRegisterDetail.value=payRegisterData.value[0]
}
const handleSelect = (key) => {
  payRegisterDetail.value=key
}
const delPayRegister = () => {
  request.post("/pay/del/payRegister",[payRegisterDetail.value]).then(res=>{
    payRegisterData.value.splice(payRegisterData.value.indexOf(payRegisterDetail.value),1)
    if (payRegisterData.value.length!==0)
      payRegisterDetail.value=payRegisterData.value[0]
    else
      payRegisterDetail.value={}
  })
}
const outPayRegister = () => {
  request.post("/pay/del/payRegister",[payRegisterDetail.value]).then(res=>{
    emit('confirmPayRegister',payRegisterDetail.value.detailObject)
    showPayRegister.value=false
  })
}

const formatDate = (date) => {
  const formatTemp=dateTimeUtils.getDate(date)
  return formatTemp.month+"-"+formatTemp.day+"\xa0\xa0\xa0"+formatTemp.hours+":"+formatTemp.minutes
}
defineExpose({
  show,
})
</script>

<style scoped>
.el-menu-item.is-active {
  color: rgb(46, 126, 226) !important;
  font-weight: bold;
  border-right: 2px solid rgb(47, 125, 223);
}
</style>